<template>
    <div id="viewDetails">
        <el-container>
            <!--  页头 -->
            <el-header style="background-color: #F3F3F3">
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>优惠券明细</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>

            <el-table border :data="tableData" style="width: 100%">
                <el-table-column align="center" prop="userId" label="用户ID"></el-table-column>
                <el-table-column align="center" prop="account" label="用户账号"></el-table-column>
                <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
                <el-table-column align="center" prop="ysy" label="已使用"></el-table-column>
                <el-table-column align="center" prop="wsy" label="未使用"></el-table-column>
                <el-table-column align="center" prop="ygq" label="已过期"></el-table-column>
            </el-table>

            <!-- 搜索区 -->
            <el-main  style="background-color: #FFFFFF;margin-top: 18px">

                <div style="text-indent: 5px;background-color: #F3F3F3">
                    <i class="el-icon-search"></i> 筛选查询
                    <el-button style="float: right;margin-top: 1%;margin-right: 15px" size="small" @click="senior = true"><i class="el-icon-arrow-left"></i> 高级检索</el-button>
                </div>

                <div style="text-indent: 5px;background-color: #F3F3F3">

                    <div class="m-div m-btn" >
                        <el-dialog title="高级筛选" :visible.sync="senior" label-width="88px">
                            <el-form ref="form" :model="seniorData" label-width="88px">

                                <el-form-item label="优惠券名称">
                                    <el-input class="setLen" v-model="seniorData.couponName"></el-input>
                                </el-form-item>

                                <el-form-item label="发放方式">
                                    <el-select style="width: 200px" v-model="seniorData.grant" clearable placeholder="全部">
                                        <el-option label="自动" value="2">自动</el-option>
                                        <el-option label="活动领取" value="3">活动领取</el-option>
                                        <el-option label="人工发放" value="4">人工发放</el-option>
                                        <el-option label="自动" value="5">无限制</el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="领取时间 ">
                                    <el-col :span="18">
                                        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="seniorData.getDate" style="width: 210px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>

                                <el-form-item label="使用时间">
                                    <el-col :span="18">
                                        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="seniorData.useDate" style="width: 200px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>

                                <el-form-item style="position: relative;top: -34px;" label="面额">
                                    <el-input class="setLen" v-model="seniorData.couponPrice"></el-input>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="senior = false">取 消</el-button>
                                <el-button type="primary" @click="filterQuery()">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                </div>

                <div style="background-color: #FFFFFF;">
                    <span style="margin-left: 80px">优惠券内容：</span><el-input v-model="couponName" size="medium " style="width: 180px" placeholder="优惠券名称"></el-input>

                    <span style="margin-left: 125px">使用状态：</span>
                    <el-select clearable size="medium" style="width: 180px" v-model="CouState" placeholder="全部">
                        <el-option
                                v-for="item in UsageStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <span style="margin-left: 125px">领取方式：</span>
                    <el-select clearable size="medium" style="width: 180px" v-model="grant" placeholder="全部">
                        <el-option
                                v-for="item in selectData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <el-button style="margin-left: 105px" @click="Search" size="medium" ><i class="el-icon-search"></i> 查询</el-button>
                </div>

            </el-main>

            <!-- 数据表 -->
            <el-footer style="line-height: 60px;text-indent: 5px">
                <i class="el-icon-s-order"></i> 数据列表

                <el-table border :data="detailedTable.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                    <el-table-column align="center" prop="usedId" label="优惠码"></el-table-column>
                    <el-table-column align="center" prop="couponName" label="优惠劵名称"></el-table-column>
                    <el-table-column align="center" prop="couponPrice" label="面额"></el-table-column>
                    <el-table-column align="center" prop="grant" label="领取方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.grant == 2">自动发放</span>
                            <span v-if="scope.row.grant == 3">活动领取</span>
                            <span v-if="scope.row.grant == 4">人工发放</span>
                            <span v-if="scope.row.grant == 5">无限制</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="getDate" label="领取时间"></el-table-column>
                    <el-table-column align="center" prop="" label="当前状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ysy == 1">已使用</span>
                                <span v-if="scope.row.wsy == 1">未使用</span>
                                <span v-if="scope.row.ygq == 1">已过期</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" prop="useDate" label="使用时间">
                        <template slot-scope="scope">
                            <span v-if="scope.row.useDate == null">N/A</span>
                            <span v-if="scope.row.useDate != null">{{scope.row.useDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="orderId" label="订单编号">
                        <template slot-scope="scope">
                            <span v-if="scope.row.orderId == null">N/A</span>
                            <span v-if="scope.row.orderId != null">{{scope.row.orderId}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="dialogFormVisible = true" @click.native.prevent="showCoupon(scope.row)" type="text" size="small">
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 查看信息 -->
                <el-dialog title="优惠券详情" destroy-on-close :visible.sync="dialogFormVisible">
                    <!-- 文本框 -->
                    <el-descriptions :contentStyle="contentStyle" :labelStyle="rowCenter" class="margin-top" :column="2" border>

                        <el-descriptions-item>
                            <template slot="label">
                                优惠码
                            </template>
                            {{showTableData.usedId}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                优惠劵名称
                            </template>
                            {{showTableData.couponName}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                可使用商品
                            </template>
                            <span v-if="showTableData.type == 2">商品</span>
                            <span v-if="showTableData.type == 3">视频</span>
                            <span v-if="showTableData.type == 4">无限制</span>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                面值
                            </template>
                            {{showTableData.couponPrice}} 元
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                领取方式
                            </template>
                            <span v-if="showTableData.grant == 2">自动发放</span>
                            <span v-if="showTableData.grant == 3">活动领取</span>
                            <span v-if="showTableData.grant == 4">人工发放</span>
                            <span v-if="showTableData.grant == 5">无限制</span>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                有效期
                            </template>
                            {{showTableData.startDate}} 至 {{showTableData.endDate}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                领取时间
                            </template>
                            {{showTableData.getDate}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                使用时间
                            </template>
                            <span v-if="showTableData.useDate == null">N/A</span>
                            <span v-if="showTableData.useDate != null">{{showTableData.useDate}}</span>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                当前状态
                            </template>
                            <span v-if="showTableData.ysy == 1">已使用</span>
                            <span v-if="showTableData.wsy == 1">未使用</span>
                            <span v-if="showTableData.ygq == 1">已过期</span>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                订单编号
                            </template>
                            <span v-if="showTableData.orderId == null">N/A</span>
                            <span v-if="showTableData.orderId != null">{{showTableData.orderId}}</span>
                        </el-descriptions-item>

                    </el-descriptions>

                </el-dialog>

                <!-- 翻页条 -->
                <div class="paging">
                    <el-pagination align='center'
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,8,12]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="detailedTable.length">
                    </el-pagination>
                </div>

            </el-footer>


        </el-container>
    </div>
</template>

<script>
export default {
    props:['UserId'],
    data(){
      return{
          tableData:[],   //用户持有优惠券数据表
          currentPage: 1, // 当前页码
          pageSize: 5, // 每页的数据条数
          selectData:[],
          UsageStatus:[],
          //搜索
          couponName:null,
          CouState:null,
          grant:null,
          //明细表格
          detailedTable:[],
          currentPage: 1, // 当前页码
          total: 0, // 总条数
          pageSize: 5, // 每页的数据条数
          //查看详情
          dialogFormVisible: false,
          showTableData:[],
          rowCenter:{"text-align":"center","line-height":"50px"},
          contentStyle:{"text-align":"center","line-height":"50px"},
          //筛选查询
          senior : false,
          seniorData:{
              couponName:null,
              grant:null,
              couponPrice:null,
              getDate:null,
              useDate:null,
              userId:null
          },
      }
    },
    created() {
        //用户持有优惠券:请求表数据
        this.$http.get("/UserCoupon/SearchTable",{params:{'UserId':this.UserId}}).then(res => {
            this.tableData = res.data
            this.total = res.data.length
        })
        //发放方式下拉框选项
        this.selectData = [
            {
                value: '2',
                label: '自动'
            }, {
                value: '3',
                label: '活动领取'
            }, {
                value: '4',
                label: '人工发放'
            }, {
                value: '5',
                label: '无限制'
            }
        ]
        //使用狀態
        this.UsageStatus = [
            {
                value: '1',
                label: '已使用'
            }, {
                value: '2',
                label: '未使用'
            }, {
                value: '3',
                label: '已过期'
            }
        ]
        //明细表格数据
        this.$http.get("/UserCoupon/getDetails",{params:{'userId':this.UserId}}).then(res => {
            this.detailedTable = res.data
            this.total = res.data.length
        })
    },
    methods:{
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //简单查询
        Search(){
            this.currentPage = 1;
            this.$http.get("/UserCoupon/getDetails",{params:{userId:this.UserId, couponName:this.couponName, CouState:this.CouState, grant:this.grant}}).then(res => {
                this.detailedTable = res.data
                this.total = res.data.length
            })
        },
        //查看
        showCoupon(row){
            console.log(this.detailedTable.length)
            for (let i = 0; i < this.detailedTable.length; i++) {
                if(this.detailedTable[i].usedId == row.usedId){
                    this.showTableData = this.detailedTable[i];
                }
            }
        },
        // 筛选查询
        filterQuery(){
            this.currentPage = 1;
            this.senior = false
            this.seniorData.userId = this.UserId
            this.$http.get("/UserCoupon/getDetails",{params:this.seniorData}).then(res => {
                this.detailedTable = res.data
            })
        }
    }

}
</script>

<style scoped>
    .s-btn{
        display: inline-block;
        float: left;
    }
    .el-header{
        background-color: #F3F3F3;
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-form-item{
        display: inline-block;
        margin-left: 50px;
        margin-top: 0px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        height: 130px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .paging{
        background-color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        padding-top: 12px;
    }
    .el-footer{
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        padding: 0px;
    }
    .f-div{
        display: inline-block;
    }
    .m-btn{
        float: right;
        margin: auto;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .el-footer{
        background-color: #F3F3F3;
        padding: 0px;
    }
</style>
